import React, { useEffect } from 'react';
import styles from './index.less';
import { Form, Input, Checkbox, Tabs } from 'antd';
import { connect } from 'umi';

import TabItem from './TabItem';

const { TabPane } = Tabs;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};

const names = {
  name1: 'roleName',
  name2: 'authName',
};

var RoleCount = props => {
  const [form] = Form.useForm();

  var { roleVisibledrawerType, roleId, allRoleAuthMap } = props.Role;

  //根据id查询角色信息
  var getRoleInfoById = async () => {
    var rs = await props.dispatch({
      type: 'Role/getRoleInfoById',
      payload: { id: roleId },
    });
    if (rs.success) {
      form.setFieldsValue({ roleName: rs.data.roleName });
      var newAllRoleAuthMap = { ...allRoleAuthMap };
      Object.keys(newAllRoleAuthMap).forEach(key => {
        newAllRoleAuthMap[key].value = [];
      });
      rs.data.authVoList.forEach((item, i) => {
        newAllRoleAuthMap[item.organize]?.value.push(item.id);
      });
      props.dispatch({
        type: 'Role/setState',
        payload: { allRoleAuthMap: newAllRoleAuthMap },
      });
    }
  };

  useEffect(() => {
    if (props.init) props.init(form);
    if (roleVisibledrawerType != 'add') {
      getRoleInfoById();
    }
  }, []);

  var { allRoleAuthMap } = props.Role;

  return (
    <div>
 
        <Form {...formItemLayout} form={form}>
          <Form.Item
            name={names.name1}
            label="角色名称"
            rules={[{ required: true, message: '请输入角色名称' }]}
          >
            <Input placeholder="请输入角色名称" />
          </Form.Item>

          <div className={styles.authCont}>
            <Form.Item
              label="功能操作权限"
              rules={[{ required: true, message: '请选择操作权限' }]}
            >
              <Tabs tabPosition={'left'}>
                {Object.keys(allRoleAuthMap).map((item, i) => {
                  return (
                    <TabPane tab={allRoleAuthMap[item].title} key={i}>
                      <TabItem key={i} data={allRoleAuthMap[item]} index={i} />
                    </TabPane>
                  );
                })}
              </Tabs>
            </Form.Item>
          </div>
        </Form>
   
    </div>
  );
};

export default connect(({ Role }) => ({ Role }))(RoleCount);
